<template>
  <div class="container">
    <div id="mapcontainer"></div>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'

export default {
  name: 'WorkspaceJsonPractice01',

  data() {
    return {
      map: {}
    }
  },

  mounted() {
    this.initAMap()
  },

  methods: {
    initAMap() {
      AMapLoader.load({
        key: 'd6cf2cc68b5303fa4efb236b18dfc020', //设置您的key
        version: '1.4.15' //指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      })
        .then((AMap) => {
          const layer = new AMap.createDefaultLayer({
            // 提示：参数值并不是API默认使用的值
            zooms: [3, 20], //可见级别
            visible: true, //是否可见
            opacity: 1, //透明度
            zIndex: 0 //叠加层级
          })
          const traffic = new AMap.TileLayer.Traffic({
            autoRefresh: true, //是否自动刷新，默认为false
            interval: 180 //刷新间隔，默认180s
          })


          this.map = new AMap.Map('mapcontainer', {
            viewMode: '2D', // 默认使用 2D 模式
            zooms: [5, 20], //初始化地图层级
            center: [116.397428, 39.90923], //初始化地图中心点
            layers: [layer, traffic],
            showIndoorMap:true
          })

          //   this.map.add(traffic) //通过add方法添加图层
          this.map.remove(traffic)

          //   加载工具插件
          AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye', 'AMap.ControlBar'], () => {
            // 异步加载插件 ToolBar：放大缩小按钮，AMap.Scale 比例尺，AMap.HawkEye 鹰眼 ，AMap.ControlBar 方向盘
            let toolbar = new AMap.ToolBar({
              position: {
                top: '110px',
                right: '40px'
              }
            }) // 缩放工具条实例化
            let Scale = new AMap.Scale()
            let HawkEye = new AMap.HawkEye()
            let ControlBar = new AMap.ControlBar()
            this.map.addControl(toolbar)
            this.map.addControl(Scale)
            this.map.addControl(HawkEye)
            this.map.addControl(ControlBar)
          })

          // 第二章
          // 点标记显示内容，HTML要素字符串
          // const markerContent =
          //   '' +
          //   '<div class="custom-content-marker">' +
          //   '   <img src="//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png">' +
          //   '   <div class="close-btn"+>X</div>' +
          //   '</div>'

          // const position = new AMap.LngLat(116.397428, 39.90923) // Marker经纬度
          // const marker = new AMap.Marker({
          //   position: position,
          //   content: markerContent, // 将 html 传给 content
          //   offset: new AMap.Pixel(-13, -30) // 以 icon 的 [center bottom] 为原点
          // })

          // this.map.add(marker)

          // 或者
          // const icon = new AMap.Icon({
          //   size: new AMap.Size(50, 50),    // 图标尺寸
          //   image: require('../../assets/homebg/bg01.jpg'),  // Icon的图像
          //   imageOffset: new AMap.Pixel(0, 0),  // 图像相对展示区域的偏移量，适于雪碧图等
          //   imageSize: new AMap.Size(50, 50)   // 根据所设置的大小拉伸或压缩图片
          // });

          // console.log('icon:', icon)
          // 将 Icon 实例添加到 marker 上:
          // const marker = new AMap.Marker({
          //   position: new AMap.LngLat(116.405467, 39.907761),
          //   offset: new AMap.Pixel(-10, -10),
          //   icon: icon, // 添加 Icon 实例
          //   title: '北京',
          //   zoom: 13
          // });
          // console.log('marker:', marker)
          // this.map.add(marker);

          // 第三章 添加事件监听器
          this.map.on('click', this.clickHandler)

        })
        .catch((e) => {
          console.log(e)
        })
    },
    clickHandler(e) {
      console.log('您在[ ' + e.lnglat.getLng() + ',' + e.lnglat.getLat() + ' ]的位置点击了地图！')
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  width: 100%;
}
#mapcontainer {
  height: 100%;
  width: 100%;
}
</style>

<style lang="scss">
.custom-content-marker {
  position: relative;
  width: 25px;
  height: 34px;
}

.custom-content-marker img {
  width: 100%;
  height: 100%;
}

.custom-content-marker .close-btn {
  position: absolute;
  top: -6px;
  right: -8px;
  width: 15px;
  height: 15px;
  font-size: 12px;
  background: #ccc;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  line-height: 15px;
  box-shadow: -1px 1px 1px rgba(10, 10, 10, 0.2);
}

.custom-content-marker .close-btn:hover {
  background: #666;
}
</style>
